<!-- <template>
  <div id="chart" :style="{ width: '100%', height: '500px' }"></div>
</template> -->
<template>
  <div class="home-container layout-pd">
    <el-row :gutter="15" class="home-card-two mb15">
      <el-col :xs="24" :sm="14" :md="14" :lg="20" :xl="16">
        <div class="home-card-item">
          <div ref="chartDom" :style="{ width: '120%', height: '700px' }"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import api from '/@/api/sy/apiWMS.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter();

const chartDom = ref(null);
// 定义颜色数组
const myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
//所有库位名称
const nameArrayStorageLocation = ref<String[]>()
// 配置选项

/**
 * 获取所有库位名称
 */
const getCodeNameArray = async () => {
  await api.post('public/Warehouse/getCodeNameArray').then((response) => {
    // 处理服务器返回的响应
    if (response.data.code == 200) {
      nameArrayStorageLocation.value = response.data.data;
    }
  })
    .catch((error) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {
      // console.log('必须执行')
    })
}

onMounted(async () => {
  // 获取所有库名
  await getCodeNameArray()


  // 初始化ECharts实例
  const myChart = echarts.init(chartDom.value);
  myChart.on('click', (params) => {
    if (params.componentType === 'series') {
      router.push({
        name: "storageLocation",
      });
    }
  });



  const option = {
    backgroundColor: '#0e2147',
    grid: {
      left: '11%',
      top: '12%',
      right: '0%',
      bottom: '8%',
      containLabel: true,
    },
    xAxis: [{ show: false }],
    yAxis: [
      {
        axisTick: 'none',
        axisLine: 'none',
        offset: '27',
        axisLabel: {
          color: '#ffffff',
          fontSize: '16',
        },
        data: nameArrayStorageLocation.value,
      },
      {
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
          color: '#ffffff',
          fontSize: '16',
        },
        data: [],
      },
      {
        name: '库位内存显示',
        nameGap: '50',
        nameTextStyle: {
          color: '#ffffff',
          fontSize: '16',
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0)',
          },
        },
        data: [],
      },
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: [4, 13, 25],
        label: {
          show: true,
          position: 'right',
          color: '#ffffff',
          fontSize: '16',
        },
        barWidth: 12,
        itemStyle: {
          color: function (params) {
            const num = myColor.length;
            return myColor[params.dataIndex % num];
          },
        },
        z: 2,
      },
      {
        name: '白框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [99, 99.5, 99.5,],
        barWidth: 20,
        itemStyle: {
          color: '#0e2147',
          borderRadius: 5,
        },
        z: 1,
      },
      {
        name: '外框',
        type: 'bar',
        yAxisIndex: 2,
        barGap: '-100%',
        data: [100, 100, 100],
        barWidth: 24,
        itemStyle: {
          color: function (params) {
            const num = myColor.length;
            return myColor[params.dataIndex % num];
          },
          borderRadius: 5,
        },
        z: 0,
      },
      {
        name: '外圆',
        type: 'scatter',
        emphasis: false,
        data: [0, 0, 0,],
        yAxisIndex: 2,
        symbolSize: 35,
        itemStyle: {
          color: function (params) {
            const num = myColor.length;
            return myColor[params.dataIndex % num];
          },
          opacity: 1,
        },
        z: 2,
      },
    ],
  };

  // 使用配置项生成图表
  myChart.setOption(option);


  // 窗口大小改变时重新调整图表大小
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>

<style>
#chart {
  width: 100%;
  height: 100%;
}
</style>
